<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    unique-opened
    mode="inline" 
  >
    
    <!-- 其他导航项 -->
    <el-menu-item index="1">
      <el-icon><House /></el-icon>
      <template #title><router-link to = "/home"  >首          页</router-link></template>
    </el-menu-item>

    <el-menu-item index="2">
      <el-icon><Menu /></el-icon>
      <template #title><router-link to = "/server"  >服        务        预        约</router-link></template>
    </el-menu-item>
    <el-menu-item index="3">
      <el-icon><document /></el-icon>
      <template #title><router-link to = "/order"  >订        单        查        询</router-link></template>
    </el-menu-item>
    

    <!-- 带子菜单的导航项 -->
    <el-sub-menu index="4">
      <template #title>
        <el-icon><Operation /></el-icon>
        <span>信    息    管    理</span>
      </template>
      <el-menu-item index="4-1"><router-link to = "/person"  >用   户   信   息</router-link></el-menu-item>
      <el-menu-item index="4-2"><router-link to = "/pet">宠   物   信   息</router-link></el-menu-item>
    </el-sub-menu>
  </el-menu>

  
</template>

<script setup>
import router from '../router/index'
import { ref, onMounted } from 'vue'


const activeIndex = ref('1')
let submenu1 = ref(null)

onMounted(() => {
  // 强制打开第一个submenu
  if (submenu1.value) {
    submenu1.value.open()
  }
})

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}


</script>

<style scoped>
.el-menu-vertical-demo {
  height: 100vh;
  width: 200px;
}
/* 修改激活菜单样式 */
.el-menu-item.is-active {
  background-color: #333 !important;
}

/* 修改悬停效果 */
.el-menu-item:hover {
  background-color: #666 !important;
}
a{
  color: white;
  text-decoration: none;
}
 
.router-link-active {
  color: white;
  text-decoration: none;
}


</style>
